import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  ScrollView,
  Image,
  Text,
  TouchableOpacity,
  DeviceEventEmitter
} from 'react-native'

import LinearGradient from 'react-native-linear-gradient';
import AsyncStorage from '@react-native-community/async-storage';
import fetchWebApi from '../../public/WebApi/fetchBase';
import getStorageValue from '../../utils/getStorageValue';
import NavBar from '../../components/PublicHeader';
import Layer from "../../utils/Layer";

import {
  Constant
} from '../../public/js/constant';
import {
  setSpText
} from '../../utils/publicMethodList'
import {
  publicMethodEllipsis
} from '../../utils/publicMethodList';
import {
  GET_USER_INFO
} from '../../public/WebApi/myInfoDataInterface/userInfoListApi';

export default class my extends Component {
  constructor(props) {
    super(props)
    this.state = {
      userInfoDatas: [], // 用户名片数据
      currentAccount: null, // 判断个人账号企业账号 值
      userType: null, // 判断营业执照 是否认证
      sex: null, // 性别
      showIndex: null, // 切换个人信息
      showPhone: null,
      phone: null,
      paramTrue: null,
      isModal: true,
      password: '',
      headerRightImage: require("../../assets/images/headerIcon/shareBtn.png"),
      photo: require('../../assets/images/iconResources/Photo.png'),
      memberZone: [
        {
          // 开通会员专区 会员标题
          openMember: require("../../assets/images/introduces/openVip.png"),
          // 会员描述
          describe: "黄金会员，享受产品至高权益",
          // 会员按钮
          activateNow: "立即开通"
        }
      ],
      indivEnter: [
        // {
        //   leftIcon: require("../../assets/images/iconResources/individualAccount.png"),
        //   tabListtext: "个人账户",
        //   rightIcon: require("../../assets/images/iconResources/returnBnt1.png"),
        //   url: "personAccount",
        //   userType: "0",
        //   currentAccount: "0"
        // },
        // {
        //   leftIcon: require("../../assets/images/iconResources/enterpriseAccount.png"),
        //   tabListtext: "企业账户",
        //   rightIcon: require("../../assets/images/iconResources/returnBnt1.png"),
        //   url: "enterAccount",
        //   userType: "1",
        //   currentAccount: "1"
        // },
      ],
      tabSetup: [
        {
          leftIcon: require("../../assets/images/iconResources/setup.png"),
          tabListtext: "设置",
          rightIcon: require("../../assets/images/iconResources/returnBnt1.png"),
          url: 'setup'
        }
      ],
      tabList: [
        {
          // 数据列表左边icon
          leftIcon: require("../../assets/images/iconResources/MyAlbum.png"),
          // 数据列表文本
          tabListtext: "自我展示",
          // 数据列表右边icon
          rightIcon: require("../../assets/images/iconResources/returnBnt1.png"),
          url: 'myAlbum'
        },
        // {
        //   leftIcon: require("../../assets/images/iconResources/Mycardbag.png"),
        //   tabListtext: "我的卡包",
        //   rightIcon: require("../../assets/images/iconResources/returnBnt1.png"),
        //   url: 'myCardBag'
        // },
        {
          leftIcon: require("../../assets/images/iconResources/Mysocialcircle.png"),
          tabListtext: "我的摸鱼",
          rightIcon: require("../../assets/images/iconResources/returnBnt1.png"),
          url: 'mySocialCircle'
        },
        // {
        //   leftIcon: require("../../assets/images/iconResources/promotionProgress.png"),
        //   tabListtext: "我的推广",
        //   rightIcon: require("../../assets/images/iconResources/returnBnt1.png"),
        //   url: 'socialCirclePromotion'
        // },
        {
          leftIcon: require("../../assets/images/iconResources/Myresume.png"),
          tabListtext: "个人简历",
          rightIcon: require("../../assets/images/iconResources/returnBnt1.png"),
          url: 'resume'
        },

        {
          leftIcon: require("../../assets/images/iconResources/Whohasseenme.png"),
          tabListtext: "谁看过我",
          rightIcon: require("../../assets/images/iconResources/returnBnt1.png"),
          url: 'seenme'
        }
      ],
    }
  }

  componentDidMount = () => {
    // 获取用户信息列表
    this.getUserMaillist()

    //收到监听
    DeviceEventEmitter.addListener('getUserMaillist',
      (param) => {
        this.setState({
          paramTrue: param
        })
        // 刷新数据    
        if (param) {
          this.getUserMaillist()
        }
      })
  }

  componentWillUnmount() {
    this.setState = () => false
    // const {
    //   paramTrue
    // } = this.state
    // //移除监听
    // if (paramTrue) {
    //   // DeviceEventEmitter.remove();
    // }
  }


  // 获取用户信息列表
  async getUserMaillist() {
    const res = await fetchWebApi(GET_USER_INFO,
      {
        token: await getStorageValue(Constant.TOKEN)
      }, 'POST');
    if (res.status == 200) {
      const {
        data
      } = res
      this.setState({
        userInfoDatas: data,
        currentAccount: data[0].currentAccount,
        userType: data[0].userType,
        sex: data[0].sex,
        showIndex: data[0].showIndex,
        showPhone: data[0].showPhone,
        phone: data[0].phone
      })
    } else if (res.status === 401) {
      await AsyncStorage.removeItem(Constant.TOKEN);
      this.props.navigation.push('Accountlogin')
      // 弹窗提示
    } else {
      Layer.showMsg("获取用户信息失败");
      return
    }
  }
  // 判断用户诚信
  reputations(item) {
    return (
      parseInt(item.creditLevel) == 1 ?
        <>
          <Text style={styles.actionCredit}>★</Text>
          <Text style={styles.actionNo}>★</Text>
          <Text style={styles.actionNo}>★</Text>
          <Text style={styles.actionNo}>★</Text>
          <Text style={styles.actionNo}>★</Text>
        </> : parseInt(item.creditLevel) == 2 ?
          <>
            <Text style={styles.actionCredit}>★</Text>
            <Text style={styles.actionCredit}>★</Text>
            <Text style={styles.actionNo}>★</Text>
            <Text style={styles.actionNo}>★</Text>
            <Text style={styles.actionNo}>★</Text>
          </> : parseInt(item.creditLevel) == 3 ?
            <>
              <Text style={styles.actionCredit}>★</Text>
              <Text style={styles.actionCredit}>★</Text>
              <Text style={styles.actionCredit}>★</Text>
              <Text style={styles.actionNo}>★</Text>
              <Text style={styles.actionNo}>★</Text>
            </> : parseInt(item.creditLevel) == 4 ?
              <>
                <Text style={styles.actionCredit}>★</Text>
                <Text style={styles.actionCredit}>★</Text>
                <Text style={styles.actionCredit}>★</Text>
                <Text style={styles.actionCredit}>★</Text>
                <Text style={styles.actionNo}>★</Text>
              </> : parseInt(item.creditLevel) == 5 ?
                <>
                  <Text style={styles.actionCredit}>★</Text>
                  <Text style={styles.actionCredit}>★</Text>
                  <Text style={styles.actionCredit}>★</Text>
                  <Text style={styles.actionCredit}>★</Text>
                  <Text style={styles.actionCredit}>★</Text>
                </> : parseInt(item.creditLevel) == 0 ?
                  <>
                    <Text style={styles.actionNo}>★</Text>
                    <Text style={styles.actionNo}>★</Text>
                    <Text style={styles.actionNo}>★</Text>
                    <Text style={styles.actionNo}>★</Text>
                    <Text style={styles.actionNo}>★</Text>
                  </> : null
    )
  }
  // 用户信息名片
  UserbusinessCardBox = () => {
    const {
      showIndex,
      photo,
      userInfoDatas,
      currentAccount,
      userType,
      showPhone
    } = this.state
    return (
      <>
        {userInfoDatas.map((item, index) => (
          //   名片
          <View key={index}>
            {/* 名片渐变背景 */}
            <LinearGradient
              start={{ x: 1, y: 1 }}
              end={{ x: 0, y: 0 }}
              colors={["#1890FF", "#7FC1FF",]}
              locations={[0, 1]}
              style={styles.businessCardBoxWarper}
            >
              <View style={styles.businessCard}
                key={index}>
                {/* 用户头像 */}
                <View style={styles.headPortraitBox}>
                  <TouchableOpacity onPress={() => {
                    this.props.navigation.push('friendAvatar',
                      {
                        friendAvatar: [{ url: item.avatar }]
                      })
                  }} style={styles.headPortrait}>
                    <Image
                      style={styles.headPortrait}
                      source={{ uri: item.avatar }}
                    />
                  </TouchableOpacity>
                  {/* <View style={styles.headPortraitLevelBox}>
                    <Image
                      source={require('../../assets/images/introduces/Group92.png')}
                      style={styles.headPortraitLevel} />
                  </View> */}
                </View>

                {/* 修改个人信息入口 */}
                <TouchableOpacity onPress={() => {
                  this.props.navigation.push('personalData',
                    {
                      refresh: () => {
                        this.getUserMaillist()
                      },
                      sex: item.sex,
                      showIndex: showIndex,
                      showPhone: showPhone,
                      currentAccount: currentAccount,
                      userType: userType
                    })
                }} style={styles.rightImage}>
                  <Image style={styles.photoImage}
                    source={photo} />
                </TouchableOpacity>
                <View style={styles.businessCardBoxWrap}>
                  <View style={styles.businessCardBox}>
                    {/* 用户详细资料展示区 */}
                    <View style={styles.nameBox}>
                      <View style={styles.row}>
                        <Text style={styles.fontSizeName}>
                          {item.nickName}
                        </Text>
                        {userType == 0 ?
                          item.sex === '女' ?
                            <Image style={styles.genderImage}
                              source={require('../../assets/images/iconResources/Frame.png')} /> : null ||
                            <Image style={styles.genderImage}
                              source={require('../../assets/images/iconResources/male.jpg')} /> : null ||
                          <Image style={{ width: 18, height: 18 }}
                            source={require('../../assets/images/maillist/enterprise.png')} />
                        }
                      </View>
                    </View>
                    <Text style={styles.colorfont}>
                      职业：{item.occupation ?
                        item.occupation : "用户未设置职业"}</Text>
                    {/* <View style={styles.row2}>
                      <Text style={styles.colorfont2}>诚信:</Text>
                      {this.reputations(item)}
                    </View> */}
                    {showIndex == 0 ?
                      <Text style={styles.colorfont}>
                        爱好：{item.hobby ?
                          item.hobby : "用户暂未添加爱好"}</Text> :
                      <Text style={styles.colorfont}>
                        电话：{item.showPhone ?
                          item.showPhone : "用户未添加手机号码"}</Text>}
                    <Text
                      numberOfLines={1}
                      ellipsizeMode={'tail'}
                      style={styles.colorfont}>
                      格言：{item.motto ?
                        item.motto : "用户很懒，什么都没写"}</Text>
                  </View>
                  {/* <ScrollView
                    // showsHorizontalScrollIndicator={false}
                    // horizontal={true}
                    style={styles.labelBox}> */}
                  <View style={styles.row3}>
                    {item.occupationLabel.map((item, index) => (
                      <View style={(index + 1) % 3 == 0 ? styles.whiteBoxRow : styles.whiteBoxRowMr}
                        key={index}>
                        {/* 标签超出时显示省略符 */}
                        <Text style={styles.whiteBox} >
                          {item}
                        </Text>
                        {/* // publicMethodEllipsis(item)} */}
                      </View>
                    ))}
                  </View>
                  {/* </ScrollView> */}
                </View>
              </View>
            </LinearGradient>
          </View>
        ))}
      </>
    )
  }
  //  会员区 
  UserMemberBox = () => {
    const {
      memberZone
    } = this.state
    return (
      <>
        {memberZone.map((item, index) => (
          <TouchableOpacity key={index}
            onPress={() => {
              this.props.navigation.navigate('openMember')
            }}>
            {/* 会员区 渐变背景 */}
            <LinearGradient
              start={{ x: 1, y: 1 }}
              end={{ x: 0, y: 0 }}
              colors={["#39A0FF", "#BADEFF",]}
              locations={[0, 1]}
              style={styles.memberBoxWarper}
            >
              <View>
                <Image style={styles.openMember}
                  source={item.openMember} />
                <Text style={styles.describe}>
                  {item.describe}
                </Text>
              </View>
              <View style={styles.activateNow}>
                <Text style={styles.activateNowText}>
                  {item.activateNow}
                </Text>
              </View>
            </LinearGradient>
          </TouchableOpacity>
        ))}
      </>
    )
  }
  // tab列表 
  TabListBox = () => {
    const {
      sex,
      tabList,
      showPhone,
      isModal,
      password,
      indivEnter,
      currentAccount,
      userType,
      tabSetup,
      userInfoDatas
    } = this.state
    return (
      <>
        {/* 默认tab遍历 */}
        {tabList.map((items, index) => (
          <TouchableOpacity key={index}
            onPress={() => {
              this.props.navigation.navigate(
                items.url,
                {
                  data: items.tabListtext,
                  phone: showPhone,
                  isModal: isModal,
                  password: password,
                  refresh: (
                    isModal,
                    password
                  ) => {
                    this.setState({
                      isModal: isModal,
                      password: password
                    })
                  }
                })
            }}>
            <View style={styles.itemBox}
              key={index}>
              <View style={styles.row}>
                <Image style={styles.systemPrompt}
                  source={items.leftIcon} />
                <Text style={styles.tabListtextTitle}>
                  {items.tabListtext}
                </Text>
              </View>
              <Image style={styles.systemPromptRighr}
                source={items.rightIcon} />
            </View>
          </TouchableOpacity>
        ))}
        {/* 个人账号/企业账号 */}
        {indivEnter.map((item, index) => (
          <TouchableOpacity key={index}
            onPress={() => {
              this.props.navigation.navigate(
                currentAccount &&
                  item.userType == 1 ?
                  "businLicense" : item.url,
                {
                  sex: sex,
                  data: item.tabListtext,
                  userType: userType,
                  defaultTrue: true,
                  getUserMaillistFN: () => {
                    this.getUserMaillist()
                  }
                })
            }}>
            {userType == 0 &&
              item.userType == 1 ?
              <View style={styles.itemBox}
                key={index}>
                <View style={styles.row}>
                  <Image style={styles.systemPrompt}
                    source={item.leftIcon} />
                  <Text style={styles.tabListtextTitle}>
                    {item.tabListtext}
                  </Text>
                </View>
                <Image style={styles.systemPromptRighr}
                  source={item.rightIcon} />
              </View> : null
            }
            {
              userType == 1 &&
                item.userType == 0 ?
                <View style={styles.itemBox}
                  key={index}>
                  <View style={styles.row}>
                    <Image style={styles.systemPrompt}
                      source={item.leftIcon} />
                    <Text style={styles.tabListtextTitle}>
                      {item.tabListtext}
                    </Text>
                  </View>
                  <Image style={styles.systemPromptRighr}
                    source={item.rightIcon} />
                </View> : null
            }
          </TouchableOpacity>
        ))}
        {tabSetup.map((items, index) => (
          <TouchableOpacity key={index}
            onPress={() => {
              this.props.navigation.navigate(
                items.url,
                {
                  data: items.tabListtext,
                  phone: userInfoDatas[0].phone,
                  isModal: isModal,
                  password: password,
                  refresh: (
                    isModal,
                    password
                  ) => {
                    this.setState({
                      isModal: isModal,
                      password: password
                    })
                  }
                })
            }}>
            <View style={styles.itemBox}
              key={index}>
              <View style={styles.row}>
                <Image style={styles.systemPrompt}
                  source={items.leftIcon} />
                <Text style={styles.tabListtextTitle}>
                  {items.tabListtext}
                </Text>
              </View>
              <Image style={styles.systemPromptRighr}
                source={items.rightIcon} />
            </View>
          </TouchableOpacity>
        ))}
      </>
    )
  }
  render() {
    return (
      <View style={styles.warper}>
        <NavBar
          navigation={this.props.navigation}
          title={"我的"}
          hideLeftArrow={false}
        />
        <ScrollView>
          <View style={styles.scrollViewCounion}>
            {/* 用户信息名片 */}
            {this.UserbusinessCardBox()}
            {/* 会员区 */}
            {/* {this.UserMemberBox()} */}
            {/* tab列表 */}
            {this.TabListBox()}
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  warper: {
    flex: 1,
    backgroundColor: "#fff"
  },
  rightImage: {
    display: 'flex',
    flexDirection: 'row',
    position: "absolute",
    top: 10,
    right: 0,
  },
  photoImage: {
    marginRight: 10,
    marginBottom: 15,
    width: 28,
    height: 28
  },
  switchBtnImage: {
    width: 28,
    height: 28
  },
  genderImage: {
    width: 16,
    height: 16,
    marginRight: 60
  },
  reputation: {
    width: 70,
    height: 8,
    marginTop: 12,
    marginLeft: 9
  },
  tinyLogo6: {
    width: 19,
    height: 19,
  },
  businessCard: {
    paddingTop: 25,
    paddingLeft: 25,
    paddingRight: 25,
    paddingBottom: 20,
    flexDirection: "row",
    position: "relative",
    width: '100%',
  },
  businessCardBoxWrap: {
    width: '65%',
    paddingLeft: 20,
    height: 170,
    // marginRight: 20,

  },
  businessCardBox: {
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'column',
    height: 140,
    width: '100%'
  },
  businessCardBoxWarper: {
    borderRadius: 10,
    marginBottom: 20
  },
  scrollViewCounion: {
    marginBottom: 40,
    paddingLeft: 15,
    paddingRight: 15
  },
  memberBoxWarper: {
    borderRadius: 10,
    height: 70,
    marginTop: 20,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 20,
    marginBottom: 10
  },
  headPortraitBox: {
    width: "35%",
    height: 170,
    // marginRight: 20,
    display: "flex",
    flexDirection: "column",
    alignItems: 'center'
  },
  headPortrait: {
    width: "100%",
    height: 140,
    borderRadius: 5,
  },
  headPortraitLevelBox: {
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: 30,
    marginTop: 8,
  },
  headPortraitLevel: {
    width: 80,
    resizeMode: 'contain'
  },
  nameBox: {
    flexDirection: "row",
    justifyContent: "space-between"
  },

  fontSizeName: {
    fontSize: 16,
    marginRight: 7,
    color: "white",
    fontWeight: "700"
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
  },
  row2: {
    flexDirection: "row",
    alignItems: "center",
  },
  labelBox: {
    marginTop: 10,
  },
  row3: {
    width: '100%',
    marginTop: 10,
    flexDirection: "row",
    alignItems: "center",
  },
  colorfont: {
    color: "white",
    fontSize: 11,
    marginRight: 7,
    overflow: 'hidden'
  },
  colorfont2: {
    color: "white",
    fontSize: setSpText(20),
    marginRight: 7
  },
  whiteBoxRowMr: {
    width: "32%",
    height: 25,
    justifyContent: 'center',
    alignItems: "center",
    borderWidth: 1,
    borderColor: '#fff',
    marginRight: "2%",
    borderRadius: 2,
  },
  whiteBoxRow: {
    width: "32%",
    height: 25,
    justifyContent: 'center',
    alignItems: "center",
    borderWidth: 1,
    borderColor: '#fff',
    borderRadius: 2,
  },
  whiteBox: {
    color: '#fff',
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
    fontSize: 9
  },
  openMember: {
    resizeMode: 'contain',
    width: "70%",
  },
  activateNow: {
    width: 75,
    height: 25,
    backgroundColor: "white",
    borderRadius: 50,
    alignItems: "center",
    justifyContent: "center",
    shadowColor: "#999",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  activateNowText: {
    color: "#1890FF",
    fontSize: 12,
  },
  itemBox: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    height: 40,
    marginTop: 10,
  },
  systemPrompt: {
    width: 26,
    height: 26,
    marginRight: 15,
  },
  systemPromptRighr: {
    width: 10,
    height: 20
  },
  tabListtextTitle: {
    fontSize: 16,
    color: "#333",
  },

  describe: {
    fontSize: 13,
    color: "#4E90CF"
  },
  actionCredit: {
    color: '#FDE400'
  },
  actionNo: {
    color: '#C4C4C4'
  },

})